import { defineComponent, ref } from 'vue'
import './RegionRank.css'

export default defineComponent({
  name: 'RegionRank',
  setup() {
    const regions = ref([
      { rank: 1, name: '湖北', value: 68234, trend: 'down' },
      { rank: 2, name: '广东', value: 2456, trend: 'down' },
      { rank: 3, name: '河南', value: 2234, trend: 'down' },
      { rank: 4, name: '上海', value: 2345, trend: 'up' },
      { rank: 5, name: '山东', value: 1987, trend: 'down' },
      { rank: 6, name: '江苏', value: 1876, trend: 'down' },
      { rank: 7, name: '四川', value: 1876, trend: 'down' },
      { rank: 8, name: '浙江', value: 1654, trend: 'up' },
      { rank: 9, name: '河北', value: 1567, trend: 'down' },
      { rank: 10, name: '湖南', value: 1345, trend: 'down' }
    ])

    const getRankClass = (rank: number) => {
      if (rank <= 3) return 'region-rank__item--top'
      return ''
    }

    return () => (
      <div class="region-rank">
        <div class="region-rank__header">
          <h3 class="region-rank__title">地区确诊排行榜</h3>
        </div>
        <div class="region-rank__list">
          {regions.value.map(region => (
            <div
              key={region.rank}
              class={`region-rank__item ${getRankClass(region.rank)}`}
            >
              <div class="region-rank__rank">{region.rank}</div>
              <div class="region-rank__name">{region.name}</div>
              <div class="region-rank__value">
                {region.value.toLocaleString()}
              </div>
              <div class={`region-rank__trend region-rank__trend--${region.trend}`}>
                {region.trend === 'up' ? '↑' : '↓'}
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }
})
